<template>
  <div class="user-management">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <el-button type="text" @click="handleLogout">退出</el-button>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <el-header>
        <el-form :model="newCompany" inline>
          <el-form-item label="公司ID">
            <el-input v-model="newCompany.companyId" placeholder="请输入公司ID"></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input v-model="newCompany.name" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="addCompany">添加公司</el-button>
          </el-form-item>
        </el-form>
      </el-header>

      <el-main>
        <!-- 数据表格 -->
        <el-table :data="tableData" stripe>
          <el-table-column prop="id" label="ID" sortable>
          </el-table-column>
          <el-table-column prop="companyId" label="公司ID" sortable>
          </el-table-column>
          <el-table-column prop="name" label="公司名称">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

    </el-container>
  </div>
</template>

  
<script>
import axios from 'axios';

export default {
  name: 'UserManagement',

  data() {
    return {
      search: {
        companyId: '',
        companyName: ''
      },
      tableData: [],
      newCompany: {
        name: '',
        companyId: ''
      }
    };
  },

  methods: {
    handleLogout() {
      this.$router.push('/');
    },

    fetchData(params = {}) {
      axios.get('http://localhost:3000/api/companies', { params })
        .then(response => {
          this.tableData = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },

    addCompany() {
      axios.post('http://localhost:3000/api/companies', {
          name: this.newCompany.name,
          companyId: this.newCompany.companyId
        })
        .then(response => {
          console.log('Company added successfully:', response.data);
          
          this.fetchData();
          
          this.newCompany.name = '';
          this.newCompany.companyId = '';
        })
        .catch(error => {
          console.error('Error adding company:', error);
        });
    },
    handleDelete(row) {
    const id = row.id; // 数据对象中有一个唯一的ID
    axios.delete(`http://localhost:3000/api/companies/${id}`)
      .then(() => {
        console.log('Company deleted successfully');
        // 在这里可以刷新数据表格，更新视图
        this.fetchData(); 
      })
      .catch(error => {
        console.error('Error deleting company:', error);
      });
  },
},

  mounted() {
    this.fetchData();
  }
};
</script>

  
  <style scoped>
  .user-management {
    display: flex;
    height: 100vh;
  }
  </style>